<template>
  <view class="exam-video-player">
    <video
      id="examVideoPlayer"
      class="video-wrapper"
      :src="fileurl"
      :enable-progress-gesture="false"
      :show-center-play-btn="false"
      :show-fullscreen-btn="false"
      :direction="90"
      @play="play"
      v-if="fileurl"
    ></video>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'BaseVideo',
  props: {
    fileurl: {
      type: String,
      default: '',
    },
    index: {
      type: Number,
      default: 0,
    },
    palyIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      videoContext: null,
    }
  },
  computed: {
    ...mapGetters({
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
  },
  watch: {
    palyIndex() {
      if (this.videoContext && this.palyIndex != this.index) {
        this.videoContext.pause()
      }
    },
  },
  mounted() {
    this.videoContext = uni.createVideoContext('examVideoPlayer', this)
  },
  methods: {
    // 当开始/继续播放时
    play(e) {
      this.$emit('play', this.index)
    },
  },
  destroyed() {
    this.videoContext = null
  },
}
</script>

<style lang="scss" scoped>
.exam-video-player {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #000000;
  .video-wrapper {
    width: 100%;
    height: 270rpx;
  }
  .video-control-tool {
    display: flex;
    padding: 9px 15px 0;
    height: 49px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    background: rgba(75, 75, 75, 0.15);
    box-sizing: border-box;

    .video-control-current {
      font-size: 12px;
      color: #ffffff;
      margin-left: 6px;
      line-height: 32px;
      width: 40px;
      text-align: center;
    }

    .video-control-duration {
      font-size: 12px;
      color: #ffffff;
      line-height: 32px;
      width: 40px;
      text-align: center;
    }

    .video-control-number {
      font-size: 12px;
      color: #ffffff;
      line-height: 32px;
    }

    .video-control-play {
      width: 20px;
      height: 20px;
      margin-top: 6px;
    }
  }
}
</style>
